<template>
  <view class="page-section page-section-spacing swiper-box">
    <swiper
      snap-to-edge="true"
      style="height: 140rpx"
      display-multiple-items="2.5"
    >
      <block>
        <swiper-item v-for="(item, index) in buttonImages" :key="index">
          <view style="padding-left:16rpx">
            <image :src="item.src" mode="widthFix" @tap="toPath(item.path)" />
          </view>
        </swiper-item>
      </block>
    </swiper>
  </view>
</template>

<script>
import Taro from '@tarojs/taro'
import index01 from './images/index01.png'
import index02 from './images/index02.png'
import index03 from './images/index03.png'
export default {
  name: 'Nav',
  props: {
    imgList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      buttonImages: [
        {
          src: index01,
          path: '/pages/self/index/index'
        },
        {
          src: index02,
          path: '/pages/business/index'
        },
        {
          src: index03,
          path: '/pages/circle/index/index'
        }
      ]
    }
  },
  methods: {
    //产品跳转
    toPath(path) {
      Taro.navigateTo({
        url: path
      })
    }
  }
}
</script>

<style>
.swiper-box {
  margin-top: 0.8rem;
}
.swiper-box image {
  width: 100%;
  border-radius: 0.3rem;
}
</style>
